<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css" src="/lib/live2D/waifu.css">

</head>
<body>
<h1>QQ空间分享</h1>
<button title="点击分享QQ空间" onclick="shareQQZone()" ><i class="yellow share icon"></i></button>
<h1>QQ好友分享</h1>
<button title="点击分享QQ好友" onclick="shareQQ()"><i class="blue qq icon"></i></button>
<h1>微博分享</h1>
<button title="点击分享微信" onclick="shareWeiXin()"><i class="green weixin icon"></i></button>
<h1>微博分享</h1>
<button title="点击分享微博" onclick="sinaWeiBo()"><i class="red weibo icon"></i></button>
<!--添加jquery依赖-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<!--添加semantic的js依赖-->
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script>
    /*分享*/
    $('.share.button').popup({
        popup : $('.share-container.popup'),
        on : 'click',
        position: 'left center'

    });
    localStorage.setItem("blogFirstPicture",document.getElementById("blogFirstPicture").value);
    /*QQ分享*/
    function shareQQ() {
        var param = {
            url:  "http://wxyblog.5gzvip.idcfengye.com/blog/3",
            desc: '发现了一篇不错的博客，一起来看看吧~',
            title : "数据测试",
            summary : '这篇博客内容不错，一起来看看吧！',
            pics : "http://cdn.sakurac.cn/blog3.jpg",
            //flash : '',
            sharesource:'qq',
            site: 'Sakura°_Blog'
        };
        var s = [];
        for (var i in param) {
            s.push(i + '=' + encodeURIComponent(param[i] || ''));
        }
        var targetUrl = "https://connect.qq.com/widget/shareqq/iframe_index.html?" + s.join('&') ;

        window.open(targetUrl, 'qq', 'height=800, width=800');
    }
    /*分享QQ空间*/
    function shareQQZone() {
        var param = {
            //获取该网站里面的所有的图片?
            url: "http://wxyblog.5gzvip.idcfengye.com/blog/3",
            sharesource: 'qzone',
            title : "数据测试",
            summary : '这篇博客内容不错，一起来看看吧！',
            pics : "",
        };
        var s = [];
        //数据拼接
        for (var i in param) {
            //添加数据并编码
            s.push(i + '=' + encodeURIComponent(param[i] || ''));
        }
        console.log(s);
        console.log(s.join('&') )
        var targetUrl = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?" + s.join('&') ;
        //window.location.href=targetUrl;
        window.open(targetUrl, 'qqZone', 'height=800, width=800');
    }

    /**
     * 微信分享
     * @return {[type]} [description]
     */
    function shareWeiXin() {
        var url = "http://wxyblog.5gzvip.idcfengye.com/blog/3",
            encodePath = encodeURIComponent(url),
            targetUrl = 'http://qr.liantu.com/api.php?text=' + encodePath;
        window.open(targetUrl, 'weixin', 'height=400, width=400');
    }

    /**
     * 分享新浪微博
     * @param  {[type]} title [分享标题]
     * @param  {[type]} url   [分享url链接，默认当前页面]
     * @param  {[type]} pic   [分享图片]
     * @return {[type]}       [description]
     */
    function sinaWeiBo() {
        var param = {
            url: "http://wxyblog.5gzvip.idcfengye.com/blog/3",
            type: '3',
            count: '1', /** 是否显示分享数，1显示(可选)*/
            appkey: '', /** 您申请的应用appkey,显示分享来源(可选)*/
            title: "面试专题"+" from 月下独酌 博客", /** 分享的文字内容(可选，默认为所在页面的title)*/
            pic: "http://cdn.sakurac.cn/blog3.jpg", /**分享图片的路径(可选)*/
            ralateUid:'', /**关联用户的UID，分享微博会@该用户(可选)*/
            rnd: new Date().valueOf()
        }
        var temp = [];
        for( var p in param ) {
            temp.push(p + '=' +encodeURIComponent( param[p ] || '' ) )
        }
        var targetUrl = 'http://service.weibo.com/share/share.php?' + temp.join('&');

        window.location.href=targetUrl;
    }

</script>

</body>
</html>